// 导入vue
import Vue from 'vue'
// 导入element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 导入根组件
import App from './App.vue'
// 省略了一部分,全称是'./router/index.js'
// 导入路由
import router from './router'
// 导入频道组件
import MyChannel from '@/components/myChannel.vue'
// 导入面包屑组件
import MyBreadcrumb from '@/components/myBreadcrumb.vue'
// 导入画板组件
import myCover from '@/components/myCover.vue'
// 导入样式
import './styles/index.less'

// 导入axios 这个是原生的未经封装加工的第三方插件
// import axios from 'axios'

// 导入axios,@符号表示指向当前的src文件,这个是二次封装后的js文件,直接
// 挂载到vue原型上,使用的时候可以当做是原生API使用
import axios from '@/utils/request.js'

// 把自定义的频道组件定义成全局组件
Vue.component('MyChannel', MyChannel)
Vue.component('MyBreadcrumb', MyBreadcrumb)
Vue.component('myCover', myCover)
// 以插件的格式引入Elmenet-ui
Vue.use(ElementUI)
// 全局注册eventBus,原理跟axios一样
Vue.prototype.$eventBus = new Vue()
// 开发模式：npm run dev是前端自己开发用的
// 生产模式：npm run build 打包之后给后端放在服务端上用的
// 下面这行代码的意思 是阻止显示生产模式的消息。
Vue.config.productionTip = false

// 全局注册，使用方法为:this.$axios
Vue.prototype.$axios = axios

new Vue({
  router, // 注册路由
  // render 函数跟 template 一样都是创建 html 模板的
  render: h => h(App)
  // 自定义渲染函数：用根组件App来实例化vue对象 或者说把根组件app渲染到页面上去 这是一种高级用法
  // 就是使用了这一句话,就把router-link和router-view这两个标签省去了
  // render: h => h(App)是ES6的写法，其实就是如下内容的简写
  //   render: function (createElement) {
  //     return createElement(App);
  // }
}).$mount('#app')
// 这里创建的vue实例没有el属性，而是在实例后面添加了一个$mount(’#app’)方法。
// $mount(’#app’) ：手动挂载到id为app的dom中的意思
// new Vue()产生一个vue实例
// .$mount('#app') 把这个实例挂载到一个名为#app的dom上。这个文件就是public/index.html
